<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>单侧阴影效果</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    .box {
        height: 100px;
        width: 200px;
        box-shadow: 8px 16px 5px -8px rgba(0, 0, 0, 0.6); 
        /* 往右偏移8,往下偏移16,阴影模糊度5,阴影扩张-8,关键是第四个参数 */
    }
</style>

<body>
    <div class="box">
    </div>
</body>
<script type="text/javascript">
</script>

</html>